<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="./../templates/StakeholderPortalTemplate.xhtml">
    <ui:define name="content">
        <f:view beforePhase="#{addAdvertisementManagedBean.initView}">
            <h:form id="adForm">
                <p:panel header="Advertisement Units" id="adFormPanel" >
                    <p:messages id="statusMessages" redisplay="false" />

                    <h:panelGrid columns="3" cellspacing="2" cellpadding="9" id="advertisementDetail">

                        <h:outputText id="labelPromotionTitle" value="#{bundle['ad.title']} " style="font-weight: bold" />
                        <p:inputText value="#{addAdvertisementManagedBean.advertisement.adName}" 
                                     id ="promotionTitle" style="width:410px;;"
                                     required="true" requiredMessage="Please enter the promotion title"/>
                        <h:outputText value="example: 35% off Lunch Meal set" 
                                      style="font-size: 10px; color: grey; float: left;"/>


                        <h:outputText value="#{bundle['ad.desc']}" style="font-weight: bold"  />
                        <p:inputTextarea value="#{addAdvertisementManagedBean.advertisement.promotionDesc}"
                                         style="width:410px; height:230px;" required="true" 
                                         requiredMessage="Please enter the promotion details"
                                         id="promotionDesc"/>
                        <h:outputText value="Enjoy 50% off when you say FoodSage.sg during billing" 
                                      style="font-size: 10px; color: grey; float: left;"/>

                        <h:outputLabel id="pstartDate" value ="#{bundle['label.sDate']}" style="font-weight: bold" />
                        <p:calendar id="calStartDate" value="#{addAdvertisementManagedBean.advertisement.startDate}" showOn="button" showButtonPanel="true" navigator="true" required="true" 
                                    requiredMessage="#{bundle['promotion.startdate']}" pattern="MM/dd/yyyy" timeZone="UTC+8" />
                        <h:column />

                        <h:outputLabel id="pEndDatelabel" value ="#{bundle['label.eDate']}" style="font-weight: bold" />
                        <p:calendar id="calEndDate" value="#{addAdvertisementManagedBean.advertisement.endDate}" showOn="button" showButtonPanel="true" navigator="true" 
                                    required="true" pattern="MM/dd/yyyy" timeZone="UTC+8"/>
                        <h:outputText value="Your ads will stop showing after this date, unless you change it later." 
                                      style="font-size: 10px; color: grey; float: left;"/>


                        <h:outputText value="#{bundle['upload.adBanner']}" style="font-weight: bold" />
                        <p:fileUpload fileUploadListener="#{addAdvertisementManagedBean.handleImageUpload}"
                                      style="float: right;" update="statusMessages"/>
                        <h:outputText value="Resolution: 200px X 100px. &nbsp; Max File size 2MB. " 
                                      style="font-size: 10px; color: red; float: left;"/>
                    </h:panelGrid>
                    <br/>
                    <h:panelGrid columns="1" width="780px" id="adGrid2">

                        <h:outputText value="Key Words Tagging" style="font-weight: bold" id="grid2txt1" />
                        <br/>
                        <h:outputText value="Cuisine Type" style="font-weight: bold; font-size: smaller" id="grid2txt2"/>
                        <h:selectManyCheckbox id="branchCuisineTypesSelectManyCheckbox"
                                              value="#{addAdvertisementManagedBean.cuisineTypeList}" style="font-size: smaller;" 
                                              converter="cuisineTypeConverter" required="please select 1 of the advertisement cuisine">
                            <f:selectItems id="branchCuisineTypesSelectItems" value="#{enumCuisineType.listItems}"/>
                        </h:selectManyCheckbox>
                        <h:outputText value="Suitable for" style="font-weight: bold; font-size: smaller" id="grid2txt3"/>
                        <h:selectManyCheckbox id="foodplace" 
                                              value="#{addAdvertisementManagedBean.fnbTypeList}" style="font-size: smaller;" converter="fnbTypeConverter">
                            <f:selectItems id="foodplacesselect" value="#{enumFnbType.checkbox}"/>
                        </h:selectManyCheckbox>


                        <h:outputText value="Activity Category" style="font-weight: bold; font-size: smaller" id="grid2txt4"/>
                        <h:selectManyCheckbox id="activityType" 
                                              value="#{addAdvertisementManagedBean.activityTypeList}" style="font-size: smaller;" converter="activityTypeConverter">
                            <f:selectItems id="activityTypeselect" value="#{enumActivityType.checkbox}"/>
                        </h:selectManyCheckbox>                                               
                        <p:ajaxStatus style="width:16px;height:16px;">
                            <f:facet name="start">
                                <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                            </f:facet>
                            <f:facet name="complete">
                                <h:outputText value="" />
                            </f:facet>
                        </p:ajaxStatus>
                        <p:commandButton update="statusMessages" actionListener="#{addAdvertisementManagedBean.saveAdvertisement}" ajax="false"
                                         style="float: right;" value="#{bundle['btnSave']}" id="pSaveBtn" process="@this activityTypeselect foodplacesselect branchCuisineTypesSelectItems"/>
                    </h:panelGrid>
                </p:panel>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
